<template>
  <div class="task-ddl">
    <template v-if="ddl == 0">
      <el-button type="text" size="mini" @click="setDDL">设置任务时限</el-button>
    </template>
    <template v-else>
      {{ ddlFormat }} <el-button type="text" size="mini" @click="updateDDL">修改</el-button>
    </template>
    <TaskDDLSet ref="taskDDLSetRef" @handleOk="val => $emit('handleOk', taskId, val)" />
  </div>
</template>
<script>
import TaskDDLSet from '../components/TaskDDLSet.vue';
export default {
  name: "TaskDDL",
  components: {
    TaskDDLSet
  },
  props: {
    taskId: {
      type: String,
      default: "0"
    },
    ddl: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ddlFormat() {
      if (this.ddl == 0) {
        return ''
      } else {
        // 将秒数转换成友好时间
        return this.formatSeconds(this.ddl)
      }
    }
  },
  methods: {
    setDDL() {
      this.$refs.taskDDLSetRef.show();
    },
    updateDDL() {
      this.$refs.taskDDLSetRef.updateDDL(this.objectSeconds(this.ddl));
    },
    objectSeconds(value) {
      // 获取天数、小时数、分钟数和秒数
      const days = Math.floor(value / (24 * 60 * 60));
      const hours = Math.floor((value % (24 * 60 * 60)) / (60 * 60));
      const minutes = Math.floor((value % (60 * 60)) / 60);
      const secondsFinal = value % 60;
      return {
        days,
        hours,
        minutes,
        secondsFinal
      }
    },
    formatSeconds(value) {
      let { days, hours, minutes, secondsFinal } = this.objectSeconds(value);

      // 格式化输出
      let formattedTime = '';

      if (days > 0) {
        formattedTime += `${Math.floor(days)}天`;
      }

      if (hours > 0) {
        formattedTime += `${Math.floor(hours)}小时`;
      }

      if (minutes > 0) {
        formattedTime += `${Math.floor(minutes)}分钟`;
      }

      if (secondsFinal > 0) {
        formattedTime += `${Math.floor(secondsFinal)}秒`;
      }

      return formattedTime;

    }
  }
}
</script>
<style lang="scss" scoped></style>